<template>
 <div id="Less">
     <h3>
         fade
     </h3>
     <div class="item" v-for="i in 10" :class="'fade'+i" :key="i"></div>
      <h3>
         tint
     </h3>
     <div class="item" v-for="i in 10" :class="'tint'+i" :key="i"></div>

      <h3>
         shade
     </h3>
     <div class="item" v-for="i in 10" :class="'shade'+i" :key="i"></div>
 </div>
</template>

<script>
 export default {
   data () {
     return {

     }
   },
   components: {
   },
   methods: {
   }
 }
</script>

<style lang="less">
@color: #2d8cf0;;
each(range(10),{
    .fade@{value}{
        background: fade(@color,10%*@value);
    }
     .tint@{value}{
        background: tint(@color,10%*@value);
    }
      .shade@{value}{
        background: shade(@color,10%*@value);
    }
})
#Less{
    .item{
        width: 80px;
        height: 80px;
        border: 1px solid #ddd;
        margin: 20px;
        display: inline-block;
    }
    
}
 
</style>
